import React from 'react';
import PropTypes from 'prop-types'
import './index.scss';
// 引入请求函数
import getArcList from '../../request/get_arc_list'

// 引入joke list item
import JokeItem from './joke_item';
import EndItem from './end_item';
import StartItem from './start_item';

class JokeModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      joke: this.props.data,
      // 做翻页动画的item个数
      activeIndex: this.props.activeIndex - 1,
      hasMore: true,
      totalCount: this.props.data.length,
    }
    this.handleKey = this.handleKey.bind(this);
    this.prevPage = this.prevPage.bind(this);
    this.nextPage = this.nextPage.bind(this);
  }
  componentDidMount() {
    this.listenEscKey();
  }
  // 预加载更多的笑话
  getMoreJoke(count) {
    const params = {
      per_page: count,
      categories: this.props.cateId,
    }
    const res = getArcList(params)
    this.handleFetch(res, count)
  }
  componentWillUnount() {
    document.removeEventListener('keydown', this.handleKey)
  }
  // 处理fetch返回的promise
  handleFetch(result, count) {
    result.then((res) => {
      const json = res.data
      if (json.length < count) {
        this.setState({
          hasMore: false,
        })
      } else {
        this.setState({
          joke: json,
        })
      }
    })
  }
  // 下一页
  nextPage() {
    const { length } = this.state.joke
    const { activeIndex } = this.state
    if (activeIndex >= length) {
      return;
    }
    if (length - activeIndex <= 2 && this.state.hasMore) {
      const count = this.state.totalCount + 5;
      this.getMoreJoke(count);
      this.setState({
        totalCount: count,
      })
    }
    this.setState({
      activeIndex: this.state.activeIndex + 1,
    })
  }
  // 上一页
  prevPage() {
    if (this.state.activeIndex <= 0) {
      return;
    }
    this.setState({
      activeIndex: this.state.activeIndex - 1,
    })
  }
  // 监听键盘事件
  listenEscKey() {
    document.addEventListener('keydown', this.handleKey)
  }
  // 处理键盘事件
  handleKey(e) {
    const event = e || window.event
    const code = event.keyCode || event.which;
    // esc 键
    if (code === 27) {
      this.props.handleClose();
      document.removeEventListener('keydown', this.handleClose)
    } else if (code === 65 || code === 37) {
      // a或者左键头
      this.prevPage();
    } else if (code === 68 || code === 39) {
      // d或者右箭头
      this.nextPage();
    }
  }
  render() {
    const { joke } = this.state
    const { length } = joke
    return (
      <div className="model">
        <div className="model-area" >
          <div className="close" onClick={this.props.handleClose} />
          <StartItem loaded={length} />
          {length ?
            joke.map((item, index) => (
              <JokeItem
                data={item}
                key={item.id}
                index={index + 1}
                activeIndex={this.state.activeIndex}
                zIndex={length - index}
                length={length}
                handlePrev={this.prevPage}
                handleNext={this.nextPage}
              />
            )) : ''
          }
          <EndItem handlePrev={this.prevPage} />
        </div>
      </div>
    )
  }
}
export default JokeModel;
JokeModel.propTypes = {
  data: PropTypes.objectOf(Object),
  activeIndex: PropTypes.number,
  cateId: PropTypes.number,
  handleClose: PropTypes.func,
}
